<template>
	<div>
		<Hedar></Hedar>
		<p class="logos">结算页</p>
		<div class="content">
			<ul class="titles">
				<li class="Lightblue">我的购物车</li>
				<li>填写核对订单信息</li>
				<li>成功提交订单</li>
			</ul>
			<ul class="Modular">

				<li class="name Odiaplay">
					我的购物车
					<div class="borderO">
						<div>
							ss
						</div>
						<div class="namebt ">
							<button @click="next1()">下一步</button>
						</div>
					</div>


				</li>
				<li class="information">
					填写并核对订单信息
					<div class="borderO">
						<div class="lio">
							<h3>收货人信息<router-link to="/LoginS">新增收货地址</router-link></h3>
							<div class="lio2">
								<span class="contacts">{{name}}</span><span class="contacts2">{{name}} </span><span>{{address}} </span><span>{{tel}}</span> <span class="default">默认地址</span>
							</div>
						</div>
						<div class="lio">
							<h3>支付方式</h3>
							<div class="lio2">
								<span class="payment">{{bank}}</span>
							</div>
						</div>
						<div class="delivery">
							<p>送货清单<span class="price">价格</span><span class="number">数量</span></p>
							<ul class="delivery2">
								<li v-for="hot in hots">
									<div class="deltop">
										<p class="song">配送方式</p>
										<div>
											<span :class="followA ? 'follow1' : 'follow2' " >卖家配送</span>
											<span :class="followA ? 'follow2' : 'follow1' ">买家自提</span>
										</div>
										<p class="time3">
											{{time}}
										</p>
									</div>
									<div class="delbot">
										<h4>商家：{{business}}</h4>
									</div>
								</li>
							</ul>
						</div>
						<div class="namebt">
							<button @click="next2()">下一步</button>
						</div>
					</div>
				</li>

				<li class="register">
					成功提交订单
				</li>
			</ul>
		</div>
		<ul class="list">
			<li>100%正品</li>
			<li>双重质检</li>
			<li>全球化采购</li>
			<li>无理由退货</li>
			<li>贵就赔</li>
			<li>万千口碑</li>
		</ul>
		<Footers></Footers>
	</div>
</template>

<script>
import Footers from'@/components/Footers'
import Hedar from'@/components/Hedar'
	export default{
		data(){
			return{
				name:"小明",
				address:"北京大兴区亦庄经济开发区 北京是大兴区亦庄县小羊坊康碱路6号",
				phone:"13634567777",
				tel:'',
				bank:"银行支付",
				time:"发货时间：买家承诺订单在系统确认付款后，30天或以合同约定时间发货",
				followA:true,
				hots:[
					{
						'bannerimg':require('@/assets/bg2.png'),
						'word':'康碱路记录阶',
						'number':'600',
					},
					{
						'bannerimg':require('@/assets/bg1.png'),
						'word':'康碱路记录阶',
						'number':'600',
					},{
						'bannerimg':require('@/assets/bg1.png'),
						'word':'康碱路记录阶',
						'number':'600',
					},
				],
				business:"皇室工匠旗舰店"


			}
		},

          components:{
		      Footers,
		      Hedar,

		    },
		mounted: function () {
            		this.tel = this.phone;
					 var reg = /^(\d{7})\d{0}(\d{4})$/;
					this.tel = this.tel.replace(reg, "$1****$2");

        },
		methods: {

		  next1:function(){



				 	 this.$http({
		                    method:'GET',
		                    url:'http://www.wutongsd.com/awm/expertsDetails.do?id=44',
		                    data:{'websiteId':2},

		                    emulateJSON: true

			            }).then(function(data){

			            		$(".titles").find("li").eq(0).removeClass("Lightblue")
						  		$(".titles").find("li").eq(0).addClass("Deepblue")
						  		$(".titles").find("li").eq(1).addClass("Lightblue")

						  		$(".Modular").find("li").eq(0).removeClass("Odiaplay")
						  		$(".Modular").find("li").eq(1).addClass("Odiaplay")
			            },function(error){
			              	this.$alert('验证码错误', '', {
					          confirmButtonText: '确定',
					         });


			      })


		  },



		  next2:function(){
					$(".titles").find("li").eq(1).removeClass("Lightblue")
			  		$(".titles").find("li").eq(1).addClass("Deepblue")
			  		$(".titles").find("li").eq(2).addClass("Deepblue")
			  		$(".Modular").find("li").eq(1).removeClass("Odiaplay")
			  		$(".register").addClass("Odiaplay")


		  },




		}
	}
</script>

<style scoped>
.logos{
	width:100%;
	height:120px;
	line-height:120px;
	margin:0 auto;
	background:url(../assets/logo.png) no-repeat 8px;
	text-align:left;
	font-size:20px;
	text-indent:200px;
}

.titles{
	height:34px;
	width:588px;

	margin:0 auto;
	overflow: auto; zoom: 1;

}
.titles li{
	height:34px;
	width:33.3%;
	background:#dcdcdc;
	float:left;
	text-align:center;
	line-height:34px;
	color:#333;
}
.lio{
	border-bottom:1px solid #aaa;
}
.lio h3{
	height:40px;
	line-height:40px;
	font-size:16px;
	color:#5d5d5d;
	font-weight:100;
	margin-bottom:5px;
}
.lio h3 a{
	font-size:14px;
	float:right;
	color:#68acff;
	font-weight:100;
}
.lio2{
	height:32px;
	line-height:32px;
	margin-bottom:35px;
	font-size:13px;
}
.lio2 span{
	display:inline-block;
	height:30px;
	text-align:center;
	padding:0 2px;
}
.lio2 .contacts{
	border:1px solid #68acff;
	width:135px;
	background:url(../assets/xuanz.png) no-repeat 127px 18px;
	margin-left:30px;
}
.lio2 .contacts2{

	width:60px;

}
.lio2 .default{

	background:#999999;
	color:#fff;
	height:30px;
	padding:0 5px;
	margin-left:5px;

}
.lio2 .payment{
	border:1px solid #68acff;
	width:135px;
	background:url(../assets/xuanz.png) no-repeat 127px 18px;
	margin-left:30px;
}
.delivery{
	border-bottom:1px solid #aaa;
}
.delivery li{
	background:#ededed;
	margin-bottom:43px;
	overflow: auto; zoom: 1;
	width:100%;
}
.deltop{
	width:340px;
	float:left;
	border-right:1px solid #cecece;

}

.deltop div span{
	display:inline-block;
	height:30px;
	line-height:30px;
	text-align:center;
}
.deltop div{

	height:96px;

}
.deltop .song{
	height:30px;
	line-height:30px;
	margin-left:30px;
}
.deltop .time3{
	min-height:135px;
	line-height:26px;
	margin-left:30px;
	width:297px;
}
.delbot{

	float:left;
	background:yellow;

}
.follow1{
	border:1px solid #68acff;
	width:135px;
	background:url(../assets/xuanz.png) no-repeat 123px 18px;
	margin-left:30px;
	color:#68acff;
}
.follow2{
	border:1px solid #999;
	width:135px;
	color:#7d7d7d;
	margin-left:15px;
}
.namebt button{
	height:35px;
	width:120px;
	background:#75b6ff;
	color:#fff;
	border:0;
	border-radius:6px;

}




.information,.register,.name{

	width:100%;
	min-height:20px;
	line-height:44px;
	margin:15px auto;
	display:none;
}

.borderO{
	border:1px solid #aaa;
	padding-left:23px;
	padding-right:23px;
}



.content{
	min-height:60px;
	text-align: left;
	width:100%;




}

.list{
	height:182px;
	margin:0 auto;
	width:1060px;
	overflow: auto; zoom: 1;

}
.list li{
	float:left;
	height:182px;
	width:163px;
	background:red;
	text-align:right;
	line-height:270px;

}
.list li:nth-child(1){
	background:url(../assets/three.png) no-repeat 101px 42px;
}
.list li:nth-child(2){
	background:url(../assets/four.png) no-repeat 101px 42px;

}
.list li:nth-child(3){
	background:url(../assets/five.png) no-repeat 101px 42px;

}
.list li:nth-child(4){
	background:url(../assets/six.png) no-repeat 101px 42px;

}
.list li:nth-child(5){
	background:url(../assets/two.png) no-repeat 101px 42px;

}
.list li:nth-child(6){
	background:url(../assets/one.png) no-repeat 101px 42px;

}
.Odiaplay{
	display:block;
}
.titles .Deepblue{
	background:#459dff;
	color:#fff;
}
.titles .Lightblue{
	background:#9dc9fb;
	color:#fff;
}
</style>
